<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>

</head>
<body>
<div layout:fragment="content">
    <div class="g-dg-search-banner">
        <i-form ref="mySearchForm" :model="searchForm" :label-width="80">
            <Row>

                <i-col span="6">
                    <Form-item label="用户名">
                        <i-input v-model="searchForm.userName" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>

                <i-col span="6">
                    <Form-item label="手机">
                        <i-input v-model="searchForm.userMobile" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>
            </Row>
        </i-form>
    </div>
    <div class="g-dg-toolbar">
        <i-button type="info" icon="search" @click="reload">查询</i-button>
    </div>
    <i-table :data="dtData" :columns="dtCols" :height="getTableHeight" size="small" :highlight-row="true"
             stripe></i-table>
    <div class="g-dg-footbar">
        <div>
            <Page :total="total" :current="page" show-elevator show-sizer show-total placement="top"
                  @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </div>
    </div>
</div>
<script layout:fragment="script">
    const m_apis = {
        getList(p_roleId, p_body, p_page, p_pageSize) {
            return PB.apiRoute('/api/sys/role/getListForUserRoleByRoleId?roleId=' + p_roleId + '&pageNo=' + p_page + '&pageSize=' + p_pageSize, 'GET', p_body);
        },
        remove(p_roleId, p_userId) {
            return PB.apiRoute('/api/sys/role/removeUserRole?userId=' + p_userId + '&roleId=' + p_roleId, 'POST');
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                title: '所属用户',
                roleId: 0,
                page: 1,
                pageSize: 10,
                total: 0,
                searchForm: {},
                dtData: [],
                dtCols: [
                    {
                        title: '用户名',
                        key: 'userName'
                    },
                    {
                        title: '手机',
                        key: 'userMobile'
                    },
                    {
                        title: '操作',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.userId)
                                        }
                                    },
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        },
        created() {
            this.roleId = PB.getPara('id');
            if (!this.roleId) {
                PB.alert('请传递角色Id进行查询');
                return;
            }
            this.loadData();
        },
        computed: {
            getTableHeight() {
                // 自己控制，减搜索栏，减按钮工具栏，减列头，减分页高度
                return window.innerHeight - 210;
            }
        },
        methods: {
            loadData() {
                let that = this;
                PB.ajax(this.apis.getList(this.roleId, this.searchForm, this.page, this.pageSize), function (d) {
                    that.dtData = d.data;
                    that.total = d.total;
                });
            },
            reload() {
                this.page = 1;
                this.loadData();
            },
            changePage(e) {
                this.page = e;
                this.loadData();
            },
            changePageSize(e) {
                this.page = 1;
                this.pageSize = e;
                this.loadData();
            },
            remove(userId) {
                let that = this;
                PB.confirm('确定删除吗？', function () {
                    PB.ajax(that.apis.remove(that.roleId, userId), function (d) {
                        that.reload();
                    });
                });
            }
        }
    })

    function saveOK() {
        vm.reload();
    }
</script>
</body>
</html>
